<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="p-l-md p-r-md p-b-md section-bg m-md radius-5">
			<view class="title-part flex-between flex-align-items p-t-sm p-b-sm font-weight">
				<m-icon name="discuss-line" :text="$util.handleStr($t('workorder-detail.card-title'),Item['type_text'])"></m-icon>
				<view class="loading-state m-l-md" :class="{'orange' : Item.state == 2 , 'green' : Item.state == 3}">
					<text>{{ Item.state_text }}</text>
				</view>
			</view>
			<view class="text-sm p-t-md">
				<view class="flex-start">
					
					<text class="m-r-md">{{ $util.handleStr($t('workorder-detail.card-item-1'),Item['type_text']) }}</text>
					<view class="flex-center">
						<text class="desc">{{ Item.num }}</text>
						<m-icon name="file-copy-2-line" @click="$util.copyText(Item.num)"></m-icon>
					</view>
				</view>
				<view class="m-t-sm">
					<text class="m-r-md">{{$t('workorder-detail.card-item-2')}}</text>
					<text class="text-secondary">{{ Item.content.text }}</text>
				</view>
				<view class="m-t-sm" v-if="Item.content.imgs">
					<text class="m-r-md">{{$t('workorder-detail.card-item-3')}}</text>
					<view class="content-imgs">
						<u-album :urls="Item.content.imgs"></u-album>
					</view>
				</view>
				<view class="m-t-sm">
					<text class="m-r-md">{{$t('workorder-detail.card-item-4')}}</text>
					<text class="text-secondary">{{Item.son}}</text>
				</view>
				<view class="m-t-sm">
					<text class="m-r-md">{{$t('workorder-detail.card-item-5')}}</text>
					<text class="text-secondary">{{Item.create_time}}</text>
				</view>
			</view>
		</view>
		<view class="p-l-md p-r-md p-b-md section-bg m-md radius-5">
			<view class="title-part flex-between flex-align-items p-t-sm p-b-sm font-weight">
				<m-icon name="discuss-line" text="沟通记录"></m-icon>
			</view>
			<view class="m-t-md">
				<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
				<view class="list-item flex-between" v-for="(item,index) in list.data" :key="index" v-if="!listLoad">
					<view class="list-item_num" v-if="item.relation">
						<u-avatar :src="item.relation.avatar" size="25" v-if="item.relation_type == 1"></u-avatar>
						<u-avatar :src="item.relation.avatar" size="25" v-if="item.relation_type == 2"></u-avatar>
					</view>
					<view class="list-item_content">
						<view>
							<view class="flex-start">
								<text v-if="item.relation_type == 1">{{ item.relation.nickname}}</text>
								<text v-if="item.relation_type == 2">{{ item.relation.username}}</text>
								<view class="m-l-sm">
									<text class="badge badge-admin" v-if="item.relation_type == 2">您回复</text>
									<text class="badge badge-admin" v-if="item.relation_type == 1">{{$t('workorder_detail.content-label-1')}}</text>
								</view>
							</view>
							<view class="list-item__time m-t-xs">
								<text>{{ item.create_time_text }}</text>
							</view>
						</view>
						<view class="list-item__info m-t-sm">
							<text >{{ item.content.text }}</text>
							<view class="content-imgs" v-if="item.content.imgs">
								<u-album :urls="item.content.imgs"></u-album>
							</view>
						</view>
						
					</view>
				</view>
				<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
			</view>
		</view>

		<view class="reply-btns flex-center" v-if="Item.state == 2 && Item.user_reply == 2">
			<m-button shape="circle" :text="$t('workorder_detail.reply-btn')" @submit="replyMoadl = true"></m-button>
			<!-- <text class="btn btn-radius btn-main">{{$t('workorder_detail.reply-btn')}}</text> -->
		</view>
		<m-modal
			:show="replyMoadl"
			:title="$t('workorder_detail.reply-modal-title')"	
			:btn="$t('workorder_detail.reply-modal-btn')"
			@btnComplete="replySubmitFeed"
			@close="replyMoadl = false"
		>
		<view class="modal-form p-t-md p-b-md">
			<view class="modal-form_item modal-form_textarea flex-between">
				<!-- <i-icon name="t-box-line" size="40rpx" color="#999"></i-icon> -->
				<view class="modal-form__inline">
					<textarea :placeholder="$t('workorder_detail.reply-modal-title')" class="textarea" v-model="replyContent"></textarea>
				</view>
			</view>
			<m-uploads
				:uploadNum="3"
				@confirm="uploadConfirm($event)"
				@delete="deleteConfirm($event)"
			>
			</m-uploads>
		</view>
		</m-modal>
		<u-loading-page :loading="pageLoading" style="z-index: 99;"></u-loading-page>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				Id:'',
				Item:{},
				pageLoading:false,
				IngText:this.$t('workorder_detail.wait-ing'),
				IngStepTime:'',
				EndStepTime:'',
				ingError:false,
				replyMoadl:false,
				status:"loading",
				cacheKey:'work_order_',
				replyContent:'',
				fileImg:[],
				showLoading:false,
				listLoad:true,
				scrollTop: 0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			list: state => state.workOrder.sonList,
			param: state => state.workOrder.sonParam,
			contentText: state => state.content.contentText,
		}),

		onLoad(option) {
			this.Id = option.id;
			this.cacheKey = this.cacheKey+this.Id;
			this.Item = uni.getStorageSync(this.cacheKey);
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.getWorkOrderDetail();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		async onPullDownRefresh(){
			await this.getSonList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getSonList(this.param.page + 1);		
		},
		methods: {
			...mapActions(['getSonWorkOrderList']),
			...mapMutations(['updateWorKOrderState']),
			
			// 获取反馈详情
			async getWorkOrderDetail(){
				let res = await this.$api.user.getWorkOrderInfo(this.Id)
				if(res.code == 200){
					this.Item = res.data;
					this.$util.setCache(this.cacheKey, res.data)
				}
				this.getSonList(1)
			},
			
			// 获取子反馈
			async getSonList(page = 0){
				this.listLoad = false
				let param = uni.$u.deepClone(this.param)
				param.id = this.Id
				if (page)param.page = page
				this.updateWorKOrderState({
					key: 'sonParam',
					val: param
				})
				await this.getSonWorkOrderList(param)
				this.pageLoading = false
			},

			// 回复反馈
			async replySubmitFeed(){
				this.$util.showLoading(this.$t('app.submiting'))
				let {
					Id,
					replyContent,
					fileImg
				} = this
				let data = {
					'id':Id,
					'text':replyContent,
					'imgs':fileImg,
					'type':this.Item.type
				}
				let res = await this.$api.user.replyWorkOrder(data)
				console.log(res)
				let thos = this
				this.$util.showToast(res.msg,function(){
					if(res.code == 200){
						thos.replyMoadl = false
						thos.getWorkOrderDetail()
					}
				})
			},
			
			// 新增图片
			uploadConfirm(e){
				const urls = e.urls;
				const _this = this;
				if(urls.length > 0){
					_this.fileImg = urls
					// for (const key in urls) {
					// 	_this.fileImg.push(urls[key]);
					// }
				}
			},
			
			// 删除图片
			deleteConfirm(e){
				const urls = e.urls;
				const _this = this;
				let chaceImgs = [];
				if(urls.length > 0){
					for (const key in urls) {
						chaceImgs.push(urls[key]);
					}
				}
				_this.fileImg = chaceImgs;
			},
			
			// 撤销反馈
			closeWork(){
				var _this = this;
				uni.showModal({
					title: this.$t('workorder-detail.cancell-modal-title'),
					content: this.$t('workorder-detail.cancell-modal-content'),
					confirmText: this.$t('workorder-detail.cancell-modal-btn'),
					success: async function (res) {
						if (res.confirm) {
							var r1 = await User.revokeFeed(_this.Id);
							if(r1.code == 200){
								uni.showToast({title:this.$t('workorder-detail.cancell-modal-message'),icon:'success'});
								_this.getInfo();
							}	
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.page-content{
		height: 100%;
		position:relative;
	}


	
	.submit-name .username{
		margin-right: 5px;
	}
	
	.reply-btns{
		width: 100%;
		position: fixed;
		bottom: 20px;
		left: 0;
		z-index: 99;
	}
	/deep/ .reply-btns .u-button{
		width: 260rpx
	}


	

	.list-item{
		flex-wrap: nowrap;
		align-items: flex-start;
		position: relative;
		padding-bottom: 50rpx;
		font-size: $contentSize;
		.flex-between{
			align-items: flex-start;
			flex-wrap: nowrap;
		}
		&_num{
			z-index: 2;
			// margin-right: 5px;
		}
		&_content{
			margin-left: 30rpx;
			width: 100%;
		}
		&__info{
			display: inline-block;
			background-color: #f3f3f3;
			color: #555;
			padding: 5px 10px;
			border-radius: 15px;
			border-top-left-radius: 0;
			color: #666;
		}
		&__time{
			// margin: 3px 0 5px;
			color: $incolor-2;
		}
		.content-imgs{
			margin-top: 7px;
		}
	}
	.list-item:first-child .list-item_num{
		border:3px solid rgba(255, 212, 38, .3);
		border-radius: 25px;
		position: relative;
		left: -3px;
		top: -3px;
	}
	.list-item:first-child .list-item__title{
		color: $incolor-1;
		// font-size: 30rpx!important;
	}
	.list-item:after{
		position: absolute;
		content: '';
		left: 12px;
		width: 1px;
		height: 100%;
		background-color: $incolor-3;
		top: 0;
		z-index: 1;
	}
	.list-item:first-child:after{
		background-color: var(--main-color-1);
	}
	.list-item:last-child:after{
		display: none;
	}
	.list-item:last-child{
		padding-bottom: 0;
	}
</style>
